<template>
  <div class="song-list-album">
    <div class="album-slide">
      <div class="album-img">
        <img :src="surUrl" />
      </div>
      <div class="album-info">
        <h2>简介:</h2>
        <span>
          {{ tempList.introduction }}
        </span>
      </div>
    </div>
    <div class="album-content">
      <div class="album-title">
        <p>{{ tempList.name }}</p>
        <div class="funcs">
          <el-button type="primary" @click="downLoadPDF()">下载</el-button>
          <el-button type="primary" @click="showStaff()">乐谱展示</el-button>
          <el-button type="primary" @click="playMusic">
            <el-icon v-if="isPause"><VideoPlay /> </el-icon>

            <el-icon v-else><VideoPause /></el-icon>
          </el-button>
        </div>
        <!--  收藏    -->
        <div class="top-left" @click="collection">
          <i v-show="!isCollection" class="el-icon-star-off"></i>
          <i v-show="isCollection" class="el-icon-star-on cred"></i>
        </div>
        <div id="music" ref="music"></div>
        <!--        <p >下载数量：{{ tempList.viewCounts }}</p>
          <p>上传时间：{{ tempList.createTime }}</p>-->
      </div>
      <!-- <comment :play-id="staffListId" :type="0"></comment> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue';
  //   import showxml from '@/util/showxml';
  import { OpenSheetMusicDisplay } from 'opensheetmusicdisplay';
  import AudioPlayer from 'osmd-audio-player';
  import axios from 'axios';

  const music = ref();
  const audioPlayer = new AudioPlayer();
  const isPause = ref(true); // 默认为暂停
  onMounted(async () => {
    const folder = `${window.location.protocol}//${window.location.host}`;
    const osmd = new OpenSheetMusicDisplay(music.value);

    const scoreXml = await axios.get(`${folder}/11.xml`);

    await osmd.load(scoreXml.data);
    await osmd.render();
    await audioPlayer.loadScore(osmd);
    //
    // audioPlayer.on('iteration', (notes) => {
    //   console.log(notes);
    // });

    // hideLoadingMessage();
    // registerButtonEvents(audioPlayer);
  });
  // 开始播放这个谱子
  const playMusic = () => {
    console.log('---audioPlayer', audioPlayer.state);
    if (audioPlayer.state === 'PAUSED' || audioPlayer.state === 'STOPPED') {
      audioPlayer.play();
    }
    if (audioPlayer.state === 'INIT' || audioPlayer.state === 'PLAYING') {
      audioPlayer.pause();
    }
  };
  const isCollection = ref(true);
  const tempList = reactive({
    name: '当前的名称',
    introduction: '这个是关于什么样的介绍呢',
  });
  const surUrl = ref(
    new URL(`../assets/img/swiper/1.jpg`, import.meta.url).href
  );
  const collection = () => {};
  const downLoadPDF = () => {};
  const showStaff = () => {};
</script>

<style lang="less" scoped>
  @import '@/assets/css/song-list-album.less';
</style>
